<%--
  Created by IntelliJ IDEA.
  User: liujie
  Date: 2016/9/5
  Time: 13:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<div class="pageContent" style="padding-top: 1px;">
    <form method="post" action="<c:url value='/survey/question/edit'/>" class="pageForm required-validate"
          onsubmit="return validateCallback(this, dialogAjaxDone);">
        <div class="pageFormContent" layoutH="56">
            <p style="width: 100%;" >
                <label>所属考试：</label>
                <select name ="belong" >
                    <c:forEach var="survey" items="${surveyList}" varStatus="vs">
                        <option value="${survey.id}">${survey.name}</option>
                    </c:forEach>
                </select>
            </p>
            <p style="width: 100%;">
                <label>题目名称：</label> <input name="title" type="text" size="30" style="width:300px;" class="required" value="${question.title}"/>
            </p>
            <p style="width: 100%;">
                <input type="button" onclick="javascript:addOption()" value="添加选项"/>
            </p>
            <table id="option_after"></table>
            <input type="hidden" name="id" value="${question.id}"/>
            <input type="hidden" name="count" id="count" value="${count}"/>
        </div>
        <div class="formBar">
            <ul>
                <li>
                    <div class="buttonActive">
                        <div class="buttonContent">
                            <button type="submit" >保存</button>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="button">
                        <div class="buttonContent">
                            <button type="button" class="close">取消</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </form>
</div>

<script type="text/javascript">
    var count= parseInt("${count}");

    $(function () {
        /**
         *加载题目选项
         */
        var option = ${option };
        if (option != null && option != "" && option != undefined) {
            $.each(option,function (index, obj) {
                var html = " <tr class=\"mark"+(index+1)+"\" style=\"line-height: 50px;\"> <td><label>选项名称：</label></td><td ><input type=\"text\" size=\"30\" style=\"width:302px;\" value=\""+obj.name+"\" name=\"name"+(index+1)+"\"/></td>"
                +"<td><input type=\"button\" onclick=\"javascript:deleteOption('" + (index+1) + "');\" value=\"删除\"></td></tr>";
                $("#option_after").append(html);
            });
        }
    });

    function addOption(){
        count++;
        $("#count").val(count);
        var html = "<tr class=\"mark"+count+"\" style=\"line-height: 50px;\"> <td><label>选项名称：</label></td><td ><input type=\"text\" size=\"30\" style=\"width:302px;\" name=\"name"+count+"\"/> </td> "
                +"<td><input type=\"button\" onclick=\"javascript:deleteOption('" + count + "');\" value=\"删除\"></td></tr>";
        $("#option_after").append(html);
    }

    function deleteOption(id){
        count--;
        $("#count").val(count);
        $(".mark"+id).remove();
    }
</script>
